<template lang="">
    <div class="warp">
         <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="box">
           <h1>登录</h1>
 <el-form-item label="用户名" prop="username">
   <el-input v-model="loginForm.username" clearable></el-input>
   </el-form-item>
    <el-form-item label="密码" prop="password" >
  <el-input v-model="loginForm.password" clearable show-password></el-input>
  </el-form-item>
     <el-form-item>
   <el-button type="primary" @click="login">登录</el-button>
 </el-form-item>
</el-form>
        </div>
</template>
<script>
// 引入登录接口
import { userLogin } from '../request/api'
export default {
    data() {
        return {
            loginForm: {
                // 登录表单
                username: '',
                password: ''
            },
            //验证规则
            rules: {
                username: [
                    // required必须的 必传项
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" },
                ]
            }
        }
    },
    methods: {
        //    封装一个登录事件
        login() {
            // 获取表单节点并验证
            this.$refs.loginForm.validate(flag => {
                if (flag) {
                    console.log(this.loginForm, '表单对象');
                    // 调取登录接口
                    userLogin(this.loginForm)
                        .then(res => {
                              console.log(res,'登录结果');
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                //把信息存储到本地存储中
                                //sessionStorage.setItem('userinfo',JSON.stringify(res.list))
                                //  把结果存储到vuex中
                                //触发行动
                                this.$store.dispatch('changeUserAction',res.list)
                                //直接跳转到index界面
                                //跳转到index页面
                                this.$router.push('/index')
                            } else {
                                this.$message.error(res.msg)
                            }
                        })

                } else {
                    console.log('验证失败');
                }
            })
        }
    },
}
</script>
<style scoped lang='less'>
.warp {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgb(233, 155, 10), rgb(209, 33, 33));

    .box {
        text-align: center;
        width: 400px;
        height: 276px;
        border-radius: 10px;
        background-color: #fff;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        padding: 30px 20px 0px 0px;
        box-sizing: border-box;

        .el-button {
            margin-left: -20px;
        }
    }
}
</style>